<style lang="scss">
  .download_boder:hover {
    border-bottom: 1px solid;
  }
</style>
<template>
  <div style="position: relative;">
    <!-- 附件 -->
    <template>
      <div>
        <template v-if="files != undefined && files != null && files.length > 0">
          <Row>
            <Col>
            <template v-for="(i,index) in files">
              <Poptip trigger="hover" word-wrap :transfer="true">
                <Button :style="{marginRight: '10px',marginBottom: '10px',backgroundColor: getColor(i.fileUrl)}">
                  {{i.fileName.length > 30 ? i.fileName.substring(0,30)+'...':i.fileName}}
                </Button>
                <div slot="content" style="text-align: center;font-size:14px">
                  <template v-if="reg2.test(i.fileName)">
                    <a href="javascript:void(0)"  @click="perview(i)" class="download_boder" style="margin-right: 30px;">预览</a>
                  </template>
                  <a href="javascript:void(0)"  @click="downLoad(i)" class="download_boder">下载</a>
                </div>
              </Poptip>
              <!-- <Tooltip content="" :key="index" max-width="400" placement="top" theme="light" :transfer="true" style="white-space: normal;">

                                </Tooltip> -->
            </template>
            </Col>
            <!-- <Icon type="ios-link" size="15"/>
                        <a href="javascript:void(0)" @click="downLoad(i)" style="padding-left:5px;padding-inline-end: 20px;font-size:14px">{{i.fileName}}</a> -->
          </Row>
        </template>
        <template v-else>
          <div style="text-align:center">
            <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无附件展示</span>
          </div>
        </template>

      </div>
    </template>
    <Spin size="large" fix v-if="loadingSpin">下载附件中...</Spin>
  </div>
</template>
<script>
  import Axios from 'axios'
  export default {
    data() {
      return {
        loadingSpin: false,
        httpHeader: {
          Authorization: this.$store.state.token
        },
        fileUrl: this.CONFIG.file_url,
        file: null,
        loadingStatus: false,
        fileUpLoadAction: "",
        //数据相关基础信息
        applyinfo: {
          files: this.files
        },
        reg2: /^(\s|\S)+(JPEG|jpeg|jpg|png|JPG|PNG|xls|xlsx|doc|docx|ppt|pptx|pdf)+$/
      }
    },
    methods: {
      // 浏览
      perview(i) {
        const {
          href
        } = this.$router.resolve({
          path: '/other_page/previewFile',
          query: {
            file: i.fileUrl,
            fileName: i.fileName
          }
        })
        window.open(href, '_blank')
      },
      // 下载模板
      downLoad(i) {
        console.log("i.fileUrl----->", i.fileUrl)
        this.loadingSpin = true
        var that = this;
        var url = this.fileUrl + '/get/' + i.fileUrl
        Axios.get(url, {
            responseType: 'blob'
          })
          .then(function(response) {
            console.log("------>", window.navigator.msSaveOrOpenBlob)
            if (window.navigator.msSaveOrOpenBlob) { //IE以及IE内核的浏览器
              try {
                var blob = new Blob([response.data])
                window.navigator.msSaveOrOpenBlob(blob, i.fileName)
              } catch (e) {
                console.log(e);
              }
            } else {
              var blob = new Blob([response.data])
              var downloadElement = document.createElement('a');
              var href = window.URL.createObjectURL(blob); //创建下载的链接
              downloadElement.href = href;
              downloadElement.download = i.fileName
              document.body.appendChild(downloadElement);
              downloadElement.click(); //点击下载
              document.body.removeChild(downloadElement); //下载完成移除元素
              window.URL.revokeObjectURL(href); //释放掉blob对象
            }

            that.loadingSpin = false
          }).catch(function(error) {
            const reader = new FileReader()
            reader.readAsText(error.response.data);
            reader.onload = function(e) {
              var msg = "访问数据错误！"
              var msg = reader.result
              that.showErrorMsg(error, msg)
            }


            that.loadingSpin = false
          });
      },
      showErrorMsg(error, msg){
        var that = this
        if (error && error.response) {
          if (error.response.status == 403) { //forbiden
            that.$Notice.error({
              title: '请求拒绝',
              desc: msg,
            });
          } else if (error.response.status == 401) { //forbiden
            that.$Notice.error({
              title: '用户未登陆',
              desc: msg,
            });
          } else if (error.response.status == 400) { //forbiden
            that.$Notice.error({
              desc: msg,
            });
          } else if (error.response.status == 406) { //forbiden
            that.$Notice.error({
              title: msg,
              duration: 5,
            });
          } else {
            that.$Notice.error({
              title: '网络异常',
              desc: msg,
            });
          }
        } else if (error == 400) {
          that.$Notice.warning({
            title: '访问数据不存在',
            desc: '请联系管理员进行处理',
          });
        } else if (error == 403) { //forbiden
          that.$Notice.error({
            title: '请求拒绝',
            desc: '您没有当前操作权限',

          });
        } else if (error == 404) {
          that.$Notice.error({
            title: '访问数据有误',
            desc: '请联系管理员进行处理',
          });
        } else if (error == 401) { //forbiden
          that.$Notice.error({
            title: '用户未登陆',
            desc: '请重新登陆该系统',
          });
        } else if (error == 406) { //forbiden
          that.$Notice.error({
            desc: msg,
            duration: 5,
          });
        } else {
          that.$Notice.error({
            title: '网络异常',
            desc: '请联系管理员进行处理',
          });
        }
      },
      getColor(url) {
        var color = "#fff"
        if (url.indexOf('.docx') !== -1) {
          color = "rgb(222,232,255)"
        } else if (url.indexOf('.xlsx') !== -1) {
          color = "rgb(204,240,235)"
        } else if (url.indexOf('.ppt') !== -1) {
          color = "rgb(254,167,110)"
        } else if (url.indexOf('.txt') !== -1) {
          color = "rgb(255,166,191)"
        }
        return color
      }
    },
    props: {
      files: {}
    },
  }
</script>
